<template>
    <div class="custom-design-box rxDialogsbox">
        <div class="custom-design-header">
            <div class="custom-design-header-left">
                <a-form-model ref="form" layout="inline" :model="mdl" :rules="rules" style="display: flex;flex-wrap: wrap;align-items: flex-start;">
                    <div>
                        <a-form-model-item :label="$ti18('rxForm.name','名称')" class="hint" prop="name">
                            <a-input @blur.native="getPinyinByName" :placeholder="$ti18('rxForm.name','名称','','input')" v-model="mdl.name"
                                @change="nameChange"
                            >
                                <my-icon slot="addonAfter" type="iconearth-full"
                                         @click="editI18nName(mdl,'name')"/>
                            </a-input>
                        </a-form-model-item>
                    </div>
                    <div style="margin-right: 16px;">
                        <a-form-model-item :label="$ti18('rxForm.rxAlias','别名') " class="hint x-a-form-model-error" prop="alias">
                            <a-input :placeholder="$ti18('rxForm.rxAlias','别名','','input') " v-model="mdl.alias"/>
                        </a-form-model-item>
                    </div>
                    <div>
                        <a-form-model-item v-show="!portalLayout" class="category hint":label="i18n('form.classify','分类')" prop="categoryId">
                            <rx-category-select v-if="isShowManageTree" :isAdmin="isManageToTree"
                                                v-model="mdl.categoryId" cat-key="FORM" :isGrant="true" style="width: 180px;"></rx-category-select>
                        </a-form-model-item>
                    </div>
                    <div style="display:flex;height: 40px;align-items: center;">
                        <a-button  v-show="!portalLayout" size="small" @click="paramConfig" type="link" :title="i18n('list.paraConfig','传入参数配置')">{{i18n('list.paraConfig','传入参数配置')}}</a-button>
                    </div>

                </a-form-model>
            </div>
            <div class="custom-design-header-right">
                <a-button-group>
                    <a-button v-show="!portalLayout" icon="export" @click="exportFormCustom">{{$ti18('rxList.exportBtn','导出')}}</a-button>
                    <a-button v-show="!portalLayout" icon="import" @click="$refs.inputFile.click()">
                        {{$ti18('rxList.importBtn','导入')}}
                        <input @change="handleOpenFile" ref="inputFile" style="display: none;" type="file"/>
                    </a-button>
                    <a-button type="primary" style="margin-right: 0" :loading="loading" @click="preview()">{{i18n('list.savePreview','保存并预览')}}</a-button>
                    <a-button @click="handleSubmit" >{{i18n('save','保存')}}</a-button>
                    <a-button @click="cancel">{{i18n('cancel','取消')}}</a-button>
                </a-button-group>
            </div>
        </div>
        <div class="custom-design-center">
            <div class="rx-roll">
                <rx-layout class="formCustomized">
                    <!--    左边布局    -->
                    <div slot="left" v-if="identification!='mobile'" width="200" showButton="true">
                        <div>
                            <div class="layout" v-show="!portalLayout">{{i18n('list.layoutType','布局类型')}}</div>
                            <div style="text-align: center;">
                                <a-radio-group v-show="!portalLayout" v-model="placement" @change="onSelectLayout" size="small" style="width: 100%;">
                                    <a-radio-button style="width: 45%;overflow: hidden;" value="custom">
                                        <a-tooltip>
                                            <template slot="title">{{i18n('classicalTips','经典布局')}}</template>
                                            <span class="rx-text-layout">{{i18n('classical','经典布局')}}</span>
                                        </a-tooltip>
                                    </a-radio-button>
                                    <a-radio-button style="width: 45%;overflow: hidden;" value="drag">
                                        <a-tooltip>
                                            <template slot="title"> {{i18n('dragTips','拖拽布局')}}</template>
                                            <span class="rx-text-layout">{{i18n('drag','拖拽布局')}}</span>
                                        </a-tooltip>
                                    </a-radio-button>
                                </a-radio-group>
                            </div>

                            <div class="layout" style="margin-top: 10px">
                                <!--                        {{i18n('list.newCompo','新建组件')}}-->
                            </div>
                            <!--经典布局-->
                            <div v-if="placement=='custom'">
                                <ul class="customUl">
                                    <li class="customControl" v-for="itm in laySelectList"
                                        :class="{ active: layoutType == itm.cls }">
                                        <div class="layoutImg" @click="selectLayoutType(itm.cls)">
                                            <div :class="'layoutImgBox ' + itm.cls"></div>
                                        </div>
                                        <p style="padding:0 2px">{{ itm.name }}</p>
                                    </li>
                                </ul>
                            </div>
                            <!--    拖拽布局     -->
                            <div v-if="placement=='drag'" style="overflow:hidden;">
                                <div class="draglist">
                                    <template v-for="obj in editImgList" >
                                        <div v-if="portalLayout || (!portalLayout && obj.key!='quickEntrance')" @click="handAddComponent(obj.key)">
                                            <div class="draglist_img">
                                                <img :src="obj.value"/>
                                            </div>
                                            <span>{{obj.name}}</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <!--门户栏目-->
                            <div v-if="placement=='drag'">
                                <div class="layout">{{i18n('list.portalCol','门户栏目')}}</div>
                                <div class="columnbox" @click="addInsColumn">
                            <span>
                                <i class="iconfont iconmanage_fill"/>
                            </span>
                                    <a-tooltip>
                                        <template slot="title">{{i18n('list.selectCol','选择栏目')}}</template>
                                        <p>{{i18n('list.selectCol','选择栏目')}}</p>
                                    </a-tooltip>

                                </div>
                                <div class="columnbox" @click="addCustomColumn">
                            <span>
                                <i class="iconfont iconmanage_fill"/>
                            </span>
                                    <a-tooltip>
                                        <template slot="title">{{i18n('list.customCol','自定义页面栏目')}}</template>
                                        <p>{{i18n('list.customCol','自定义页面栏目')}}</p>
                                    </a-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--    中间预览    -->
                    <div slot="center" class="rx-box">
                        <div class="form-center">

                            <div class="form-center-head" v-if="placement !='custom' && !portalLayout">
                                <my-icon :class="[identification=='pc'?'form-center-hea-color':'']" type="iconcomputer" @click="identification='pc'"></my-icon>
                                <my-icon :class="[identification=='mobile'?'form-center-hea-color':'']" type="iconmobilephone" @click="myMobile"></my-icon>
                            </div>
                            <div  v-if="identification=='mobile'" class="mobile-form-center-list">
                                <FormCustomEditMobile @jsonChad="jsonChad" :json="json" :editImgList="editImgList"></FormCustomEditMobile>
                            </div>
                            <div v-if="identification=='pc'" class="form-center-list">
                                <!--拖拽布局 -->
                                <div style="height: 100%; width: 100%" v-if="placement=='drag'">
                                    <grid-layout
                                        class="gridLayoutporview "
                                        :layout.sync="json"
                                        :col-num="24"
                                        :row-height="2"
                                        :is-draggable="true"
                                        :is-resizable="true"
                                        :is-mirrored="false"
                                        :vertical-compact="true"
                                        :margin="[10, 10]"
                                        :use-css-transforms="true"
                                    >
                                        <grid-item
                                            v-for="item in json"
                                            :x="item.x"
                                            :y="item.y"
                                            :w="item.w"
                                            :h="item.h"
                                            :i="item.i"
                                            :key="item.i"
                                            class="griditem"
                                        >
                                            <div :class="[moduleid ==item.id?'gridLayoutClass gridLayout-select':'gridLayoutClass ']"  @click="editObj(item,false)">
                                                <div class="headPClass">
                                             <span class="editBtnSpan"  v-show="!cannotEdit.contains(item.defConf) && moduleid == item.id" @click="editObj(item,true)">
                                                <a-icon :title="$ti18('rxList.editBtn','编辑')" type="edit"></a-icon>
                                            </span>
                                                  <span class="editBtnSpan"  v-show="funcComponents.includes(item.defConf) &&  moduleid == item.id" @click="copyAlias(item)">
                                                    <a-icon :title="i18n('list.copyAlias','复制标识')" type="key" />
                                                </span>
                                                    <span class="editBtnSpan"  v-show="funcComponents.includes(item.defConf) &&  moduleid == item.id" @click="copyFunction(item)">
                                                    <a-icon :title="i18n('list.copyFunction','复制函数')" type="copy" />
                                                </span>
                                                    <span class="editBtnSpan"   v-show="item.defConf=='chart' && !item.config && moduleid == item.id" @click="getChart(item)">
                                                    <a-icon :title="i18n('list.importChart','引入已有图表')" type="area-chart" />
                                            </span>
                                                    <span class="btnSpan" v-show="moduleid == item.id" @click="removeObj(item.i)">
                                                    <a-icon :title="$ti18('rxList.delBtn','删除')" type="delete">
                                                    </a-icon>
                                            </span>
                                                </div>
                                                <!-- 控件内容-->
                                                <div class="FormCustomEditControl">
                                                    <div v-if="item.defConf!='tabContainer'" class="FormCustomEditControl-prohibit"></div>
                                                    <tab-container-edit
                                                        v-if="item.defConf=='tabContainer'"
                                                        :ref="item.config.name"
                                                        :layoutItem="item"
                                                        :config="item.config"
                                                        :editImgList="editImgList"
                                                        :paramConfig="mdl.params"
                                                        :mdl="mdl"
                                                        :json="json"
                                                    ></tab-container-edit>

                                                    <FormCustomEditControl
                                                        v-else
                                                        :item="item" :editImgList="editImgList" :readonly="false" :isDesign="true"></FormCustomEditControl>

                                                </div>
                                            </div>
                                        </grid-item>
                                    </grid-layout>
                                </div>
                                <!--经典布局 -->
                                <div style="width: 100%;height:100%;overflow: hidden" v-if="placement=='custom'">
                                    <custom-layout :key="layoutKey" :allModel="allModel">
                                        <div
                                            v-for="(item,index) of lay"
                                            :slot="item"
                                            v-if="allModel.layoutModel[item]"
                                            :layoutStyle="allModel[item].toolStyle"
                                            style="height:100%;overflow: hidden"
                                            @click="ceremony(item)"
                                        >
                                            <div class="headPClass">
                                        <span :class="[tips == item? 'select-tit':'tips-tit']" >
                                            {{ layTitle[item] }}
                                        </span>
                                            </div>
                                            <div class="griditem" style="height: 100%">
                                                <template v-if="allModel[item].showTab == 'no' && allModel[item].selectModel.config">
                                                    <div v-for="obj in editImgList">
                                                        <div class="editImg" v-if="allModel[item].selectModel.name==obj.key">
                                                            <img :src="obj.value"/>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-if="allModel[item].showTab == 'yes'">
                                                    <layout-tab :ref="item" :config="allModel[item].tabData" :editImgList="editImgList"></layout-tab>
                                                </template>
                                            </div>
                                        </div>
                                    </custom-layout>
                                </div>
                            </div>
                        </div>
                    </div>
                </rx-layout>
                <!--    编辑布局    -->
                <a-drawer
                    placement="right"
                    @close="closeDrawert"
                    width="550"
                    :destroyOnClose="true"
                    :visible="editLayout"
                    :z-index="9999"
                    :closable="false"
                    :wrapClassName="'rxDrawerBox x-a-drawer'"
                    :bodyStyle="{padding:'10px 0'}"
                >
                    <!--    经典布局      -->
                    <div class="editModl" v-if="placement=='custom'" :key="selectLay + '' + layKey">
                        <div class="lay-title">{{layTitle[selectLay]}}</div>
                        <div class="lay-con">
                            <a-form :layout="'horizontal'" v-if="allModel.layoutModel[selectLay]" class="afromlist">
                                <div v-if="layTitle[selectLay] == i18n('upLayout','上布局') || layTitle[selectLay] == i18n('downLayout','下布局')">{{i18n('list.height','高度')}}</div>
                                <a-form-item v-if="layTitle[selectLay] == i18n('upLayout','上布局') || layTitle[selectLay] == i18n('downLayout','下布局')">
                                    <a-input-search
                                        style="margin-top: 5px"
                                        @change="changeclick(selectLay)"
                                        v-model="allModel[selectLay].stylenam"
                                        :placeholder="$ti18('rxDecorator.input','请输入')"
                                    >
                                        <a-button slot="enterButton">px</a-button>
                                    </a-input-search>
                                </a-form-item>
                                <div v-if="layTitle[selectLay] == i18n('leftLayout','左布局') || layTitle[selectLay] == i18n('rightLayout','右布局')">{{i18n('list.width','宽度')}}</div>
                                <a-form-item v-if="layTitle[selectLay] == i18n('leftLayout','左布局') || layTitle[selectLay] == i18n('rightLayout','右布局')">
                                    <a-input-search
                                        style="margin-top: 5px"
                                        @change="whiteclick(selectLay)"
                                        v-model="allModel[selectLay].stylenam"
                                        :placeholder="$ti18('rxDecorator.input','请输入')"
                                    >
                                        <a-button slot="enterButton">px</a-button>
                                    </a-input-search>
                                </a-form-item>
                                <a-checkbox v-model="allModel[selectLay].stylefalg" class="tablist"
                                            @change="onstyle($event, selectLay)">{{i18n('list.addStyles','添加更多样式')}}
                                </a-checkbox>
                                <div v-if="allModel[selectLay].stylefalg == true">{{i18n('list.styleSet','样式设置（可不设）')}}</div>
                                <a-form-item v-if="allModel[selectLay].stylefalg == true" style="margin-bottom: 10px">
                                    <a-textarea
                                        v-model="allModel[selectLay].toolStyle"
                                        :placeholder="i18n('enterStyle','请输入自定义样式（可不设）')"
                                        :auto-size="{ minRows: 3, maxRows: 5 }"
                                        style="width: 100%;margin-top: 5px"
                                    />
                                </a-form-item>
                                <br v-if="allModel[selectLay].stylefalg != true" />
                                <a-checkbox class="tablist" :defaultChecked="allModel[selectLay].showTab == 'yes'"
                                            @change="onChange($event, selectLay)">{{i18n('list.useTab','使用Tab组件')}}
                                </a-checkbox>
                                <div v-if="allModel[selectLay].showTab == 'no'">
                                    <a-radio-group
                                        name="radioGroup"
                                        v-model="allModel[selectLay].selectModel.name"
                                        @change="handleMenuClick($event.target.value, selectLay, allModel[selectLay])"
                                    >
                                        <a-radio value="form">{{i18n('formCompo','表单组件')}}</a-radio>
                                        <a-radio value="list">{{i18n('listCompo','列表组件')}}</a-radio>
                                        <a-radio value="tree">{{i18n('treeCompo','树型组件')}}</a-radio>
                                    </a-radio-group>
                                </div>
                                <div class="biaolist" v-if="allModel[selectLay].showTab != 'yes'">
                                    <form-def
                                        v-on:formSubmit="translateText"
                                        :layout="allModel"
                                        :type="allModel[selectLay].selectModel.name"
                                        :conf="allModel[selectLay].selectModel.config"
                                        :item="selectLay"
                                        :portalLayout="portalLayout"
                                        :paramConfig="mdl.params"
                                        v-if="allModel[selectLay].selectModel.name == 'form'"
                                    ></form-def>
                                    <list-def
                                        v-on:formSubmit="translateText"
                                        :layout="allModel"
                                        :type="allModel[selectLay].selectModel.name"
                                        :item="selectLay"
                                        :conf="allModel[selectLay].selectModel.config"
                                        :portalLayout="portalLayout"
                                        :paramConfig="mdl.params"
                                        v-if="allModel[selectLay].selectModel.name == 'list'"
                                    ></list-def>
                                    <tree-def
                                        v-on:formSubmit="translateText"
                                        :layout="allModel"
                                        :item="selectLay"
                                        :type="allModel[selectLay].selectModel.name"
                                        :conf="allModel[selectLay].selectModel.config"
                                        :portalLayout="portalLayout"
                                        :paramConfig="mdl.params"
                                        v-if="allModel[selectLay].selectModel.name == 'tree'"
                                    ></tree-def>
                                </div>
                                <div v-if="allModel[selectLay].showTab == 'yes'">
                                    <layout-tab-grid
                                        v-model="allModel[selectLay].tabData"
                                        v-on:laytab="laytablist"
                                        :allModel="allModel"
                                        :item="selectLay"
                                        :type="allModel[selectLay].selectModel.name"
                                        :key="selectLay + '' + layKey"
                                        :paramConfig="mdl.params"
                                    ></layout-tab-grid>
                                </div>
                            </a-form>
                        </div>
                    </div>
                    <!--    拖拽布局      -->
                    <div v-if="placement=='drag'">
                        <div class="biaolist">
                            <FormCustomEditDef :support="support" :mdl="mdl" :json="json" :supportConf="supportConf" v-on:dragclick="daraglist" :portalLayout="portalLayout" :paramConfig="mdl.params"></FormCustomEditDef>
                        </div>
                    </div>
                </a-drawer>
                <!--    编辑布局    -->
                <a-drawer
                    placement="right"
                    @close="closeParam"
                    width="550"
                    :destroyOnClose="true"
                    :visible="paramDrawer"
                    :z-index="9999"
                    :wrapClassName="'x-a-drawer'"
                >
                    <param-config-def :paramConfig="mdl.params" @setParams="setParams"></param-config-def>
                </a-drawer>
                <a-modal :title="$ti18('rxMsa.tips','提示')" :visible="modalVisible" @ok="handleOk" @cancel="handleCancel" :zIndex="99999999"
                         :width="400">
                    <p>{{i18n('switchLay','确定切换布局吗？')}}<br/>{{i18n('allConfig','切换布局已经配置过的数据将')}}<span style="color: red">{{i18n('beReset','全部重置')}}</span></p>
                </a-modal>
            </div>
        </div>
    </div>
</template>
<script>
/*
 *layoutType:自定义布局的类型,值如下：
 *up-down-01 上下布局一
 *up-down-02 上下布局二
 *left-middle-right 左中右布局
 *left-right 左右布局
 *left-up-down 左上下布局
 *
 *layoutModel:决定自定义组件显示渲染成什么样子；
 *选择各种布局类型其实就是修改layoutModel里面的布尔值；
 *
 *
 *
 * */

import FormCustomApi from '@/api/form/core/formCustom'
import {BaseFormModel, RxDialog, Util, RxLayout,Dialog} from "@lowcode/jpaas-common-lib"
import customLayout from './formCustomLayout/CustomLayout.vue'
import FormComponent from "./formComponent/FormComponent";
import ListComponent from "./formComponent/ListComponent";
import TreeComponent from "./formComponent/TreeCompoment";
import LayoutTabGrid from "./formCustomLayout/LayoutTabGrid.vue";
import insPortalDefApi from "@/api/portal/core/insPortalDef";
import insPortalDialogApi from "@/api/portal/core/insPortalDialog";
import ParamConfigDef from './formComponent/ParamConfigDef.vue';
import CustomPageColumnDialog from "@/views/modules/portal/core/CustomPageColumnDialog";
import FormChartComponentDialog from "@/views/modules/form/core/FormChartComponentDialog";
import QuillEditorView from "./formComponent/QuillEditorView";
import vuedraggable from 'vuedraggable'
import FormCustomEditMobile from './FormCustomEditMobile';
import FormCustomEditControl from './FormCustomEditControl';
import BpmComponent from './formComponent/BpmComponent.vue'
import FormCustomEditDef from "@/views/modules/form/core/FormCustomEditDef";
import TabContainerEdit from "@/views/modules/form/core/formComponent/TabContainerEdit";
import ListDef from "@/views/modules/form/core/formComponent/ListDef";
import FormDef from "@/views/modules/form/core/formComponent/FormDef";
import TreeDef from "@/views/modules/form/core/formComponent/TreeDef";
import FormChartBoard from "./FormChartBoard.vue"
import DialogView from "@/layouts/DialogView.vue";
var FileSaver = require('file-saver');

export default {
    name: 'FormCustomEdit',
    mixins: [BaseFormModel],
    components: {
        TabContainerEdit,
        FormCustomEditDef,
        RxDialog,
        customLayout,
        RxLayout,
        ParamConfigDef,
        FormChartComponentDialog,
        QuillEditorView,
        vuedraggable,
        FormCustomEditMobile,
        FormCustomEditControl,
        FormComponent,
        ListComponent,
        TreeComponent,
        BpmComponent,
        LayoutTabGrid,
        ListDef,
        FormDef,
        TreeDef
    },
    props:{
        /**
         * 是否是门户设计。
         */
        portalLayout:{
            type:Boolean,
            default:false
        },
        categoryId:{
            type:String,
            default:''
        }
    },
    inject:{
        currentApp:{
            default:()=>{return {}}
        }
    },
    data() {
        return {
            dragShow:false,
            keyShow:new Date().getTime(),
            identification:'pc',//mobile
            moduleid:'',
            tips:'',
            layoutKey: '',
            layKey: '',
            lay: ['header', 'inheader', 'left', 'right', 'center', 'footer', 'infooter'],
            selectLay: "",
            allModel: {
                layoutModel: {
                    header: false,
                    inheader: false,
                    left: false,
                    right: false,
                    footer: false,
                    infooter: false,
                    center: false,
                },
                header: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                inheader: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                left: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                right: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                center: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                footer: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
                infooter: {
                    selectModel: {
                        name: 'form',
                        config: {},
                    },
                    toolStyle: '',
                    stylenam: '',
                    stylefalg: false,
                    showTab: 'no',
                    tabData: [],
                },
            },
            laySelectList: [
                {name: this.i18n('form.upDownOne','上下布局一'), cls: 'upDown'},
                {name: this.i18n('form.upDownTwo','上下布局二'), cls: 'upDown2'},
                {name: this.i18n('form.leftCenter','左中右布局'), cls: 'leftMiddleRight'},
                {name: this.i18n('form.leftRight','左右布局'), cls: 'leftRight'},
                {name: this.i18n('form.leftTop','左上下布局'), cls: 'leftUpDown'},
            ],
            layTitle: {},
            layoutTitle: {
                upDown: {header: this.i18n('upLayout','上布局'), center: this.i18n('downLayout','下布局')},
                upDown2: {center: this.i18n('upLayout','上布局'), footer: this.i18n('downLayout','下布局')},
                leftMiddleRight: {left: this.i18n('leftLayout','左布局'), center: this.i18n('middleLayout','中布局'), right: this.i18n('rightLayout','右布局')},
                leftRight: {left: this.i18n('leftLayout','左布局'), center: this.i18n('rightLayout','右布局')},
                leftUpDown: {left: this.i18n('leftLayout','左布局'), inheader: this.i18n('upLayout','上布局'), center: this.i18n('downLayout','下布局')},
            },
            layoutType: '',
            activeLayout: '',
            drawerTitle: this.i18n('list.customLay','自定义布局'),
            placement: 'custom',
            rules: {
                name: [{required: true, message: this.$ti18('rxForm.name','名称','','input'), trigger: 'change'}],
                alias: [
                    {required: true, message: this.$ti18('rxForm.rxAlias','别名','','input'), trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n3('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                type: [{required: false, message: this.$ti18('rxForm.type','类型','','input'), trigger: 'change'}],
                json: [{required: false, message: this.i18n('form.layDefine','布局定义','input'), trigger: 'change'}],
                categoryId: [{required: !this.portalLayout, message: this.i18n('form.classify','分类','select'), trigger: 'change'}],
            },
            mdl: {
                name: '',
                alias: '',
                typeChecked: true,
                json: "",
                categoryId:"",
                params:""
            },
            model1: [
                {name: this.i18n('formCompo','表单组件'), key: 'form'},
                {name: this.i18n('listCompo','列表组件'), key: 'list'},
                {name: this.i18n('treeCompo','树形组件'), key: 'tree'},
            ],
            selectLayout: {
                upDown: {header: true, center: true},
                upDown2: {center: true, footer: true},
                leftMiddleRight: {left: true, center: true, right: true},
                leftRight: {left: true, center: true},
                leftUpDown: {left: true, inheader: true, center: true},
            },

            isShow: true,
            modalVisible: false,
            display: '',
            support: '',
            supportConf: '',
            draglist: '',
            selectId: '',
            json: [],
            loading: false,
            //门户栏目
            insColumns:[],
            editLayout:false,
            paramDrawer:false,
            editImgList:[
                {
                    key:'form',
                    value:require('../../../../../static/img/module-form.png'),
                    bigValue:require('../../../../../static/img/big-module-form.png'),
                    name:this.i18n('formCompo','表单组件')
                },{
                    key:'list',
                    value:require('../../../../../static/img/module-list.png'),
                    bigValue:require('../../../../../static/img/big-module-list.png'),
                    name:this.i18n('listCompo','列表组件')
                },{
                    key:'tree',
                    value:require('../../../../../static/img/module-tree.png'),
                    bigValue:require('../../../../../static/img/big-module-tree.png'),
                    name:this.i18n('treeCompo','树形组件')
                },{
                    key:'chart',
                    value:require('../../../../../static/img/module-chart.png'),
                    bigValue:require('../../../../../static/img/big-module-chart.png'),
                    name:this.i18n('chartCompo','图表组件')
                },
                {
                    key:'tabContainer',
                    value:require('../../../../../static/img/module-tab.png'),
                    bigValue:require('../../../../../static/img/big-module-tab.png'),
                    name:this.i18n('tabContainerCompo','tab容器')
                },{
                    key:'custom',
                    value:require('../../../../../static/img/module-custom.png'),
                    bigValue:require('../../../../../static/img/big-module-custom.png'),
                    name:this.i18n('customCompo','自定义组件')
                },{
                    key:'calendar',
                    value:require('../../../../../static/img/module-calendar.png'),
                    bigValue:require('../../../../../static/img/big-module-calendar.png'),
                    name:this.i18n('calCompo','日历组件')
                },{
                    key:'filter',
                    value:require('../../../../../static/img/module-filter.png'),
                    bigValue:require('../../../../../static/img/big-module-filter.png'),
                    name:this.i18n('filterCompo','筛选器组件')
                },{
                    key:'quillEditor',
                    value:require('../../../../../static/img/module-quillEditor.png'),
                    bigValue:require('../../../../../static/img/big-module-quillEditor.png'),
                    name:this.i18n('richTextCompo','富文本组件')
                },{
                    key:'carousel',
                    value:require('../../../../../static/img/module-carousel.png'),
                    bigValue:require('../../../../../static/img/big-module-carousel.png'),
                    name:this.i18n('wheelCompo','轮播图组件')
                },{
                    key:'bpm',
                    value:require('../../../../../static/img/module-form.png'),
                    bigValue:require('../../../../../static/img/big-module-form.png'),
                    name:this.i18n('bpmCompo','流程组件')
                },
                {
                    key:'ureport',
                    value:require('../../../../../static/img/module-ureport.png'),
                    bigValue:require('../../../../../static/img/big-module-ureport.png'),
                    name:this.i18n('uReportCompo','ureport组件')
                }, {
                    key:'screenChart',
                    value:require('../../../../../static/img/module-chart.png'),
                    bigValue:require('../../../../../static/img/big-module-chart.png'),
                    name:this.i18n('screenChart','大屏图表组件')
                },{
                    key:'quickEntrance',
                    value:require('../../../../../static/img/big-module-quickEntrance.png'),
                    bigValue:require('../../../../../static/img/big-module-quickEntrance.png'),
                    name:this.i18n('quickEntrance','快捷入口')
                },{
                    key:'gisMap',
                    value:require('../../../../../static/img/module-gisMap.png'),
                    bigValue:require('../../../../../static/img/big-module-gisMap.png'),
                    name:this.i18n('gisMap','GIS地图')
                },{
                    key:'chartBoard',
                    value:require('../../../../../static/img/big-module-cutom.png'),
                    bigValue:require('../../../../../static/img/big-module-cutom.png'),
                    name:this.i18n('chartBoard','图表看板')
                },{
                    key:'myChartBoard',
                    value:require('../../../../../static/img/myChartBoard.png'),
                    bigValue:require('../../../../../static/img/myChartBoard.png'),
                    name:this.i18n('myChartBoard','我的图表看板')
              },{
                    key:'customPage',
                    value:require('../../../../../static/img/myChartBoard.png'),
                    bigValue:require('../../../../../static/img/myChartBoard.png'),
                    name:'页面定制'
                }
            ],
            //需要拷贝脚本的组件
            funcComponents:["form","list","tree","chart","custom","bpm","gisMap","customColumn"],
            cannotEdit:["column","customColumn","chartBoard","myChartBoard"]
        }
    },
    created() {
        this.isUserManager(this.$route.query.appId);
        //门户定义则隐藏经典布局
        if(this.portalLayout){
            this.placement = 'drag';

        }
        if(!this.mdl.categoryId && this.categoryId && this.categoryId!=0){
            this.mdl.categoryId = this.categoryId
        }
    },
    mounted() {
        //获取门户栏目
        this.getInsColumns();
    },
    methods: {
        getModuleFliter(item){
            let _obj = {
                column:this.i18n('colCompo','栏目组件'),
                list:this.i18n('listCompo','列表组件'),
                form:this.i18n('formCompo','表单组件'),
                tree:this.i18n('treeCompo','树形组件'),
                chart:this.i18n('chartCompo','图表组件'),
                tab:this.i18n('tabCompo','tab组件'),
                ureport:this.i18n('uReportCompo','ureport组件'),
                tabContainer:this.i18n('tabContainerCompo','tab容器'),
            }
            if(item.config && item.config.name){
                return item.config.name ;
            }else {
                return _obj[item.defConf] ;
            }
        },
        getPinyinByName(){
            let name=this.mdl.name
            if (!name){
                return;
            }
            if (this.mdl.alias){
                return;
            }
            this.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.$set(this.mdl,"alias",res)
            })
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        i18n3(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        refresh(type) {
            this.json = type
        },
        rxDrag(){
            this.keyShow = new Date().getTime();
        },
        myMobile(){
            this.identification = 'mobile';
            this.json  = this.json.filter(res=>{
                if(res.mobileShow ==undefined){
                    res['mobileShow'] = true
                }
                if(!res.mobileH){
                    res['mobileH'] = 300;
                }
                return res
            })
        },
        //编辑经典布局
        ceremony(itme){
            this.tips = itme;
            this.selectLay = itme;
            this.editLayout=true;
        },
        supClick(e) {
            this.support = e;
            this.supportConf = '';
            // 清空选择
            this.draglist = '';
        },
        daraglist(config) {
            this.draglist = config;
            for (var i = 0; i < this.json.length; i++) {
                if (this.selectId == this.json[i].id) {
                    this.json[i].config = config;
                    break;
                }
            }
        },
        translateText(config, index, type, item) {
            this.$set(this.allModel[item].selectModel, 'name', type)
            this.$set(this.allModel[item].selectModel, 'config', config)
            var tabData = []
            this.$set(this.allModel[item], 'tabData', tabData)
        },
        laytablist(gridData, type) {
            var selectModel = {
                name: '',
                config: {},
            }
            this.$set(this.allModel[type], 'tabData', gridData)
            this.$set(this.allModel[type], 'selectModel', selectModel)
        },
        // 高度
        changeclick(item) {
            if (this.allModel[item].stylenam != '') {
                var listnam = 'height:' + this.allModel[item].stylenam + 'px'
            }
            this.allModel[item].toolStyle = listnam
        },
        //宽度
        whiteclick(item) {
            if (this.allModel[item].stylenam != '') {
                var listnam = 'width:' + this.allModel[item].stylenam + 'px'
            }
            this.allModel[item].toolStyle = listnam
        },
        onChange(e, type) {
            this.display = ''
            /*是否使用tab组件*/
            this.allModel[type].showTab = e.target.checked ? 'yes' : 'no';
        },
        onstyle(e, type) {
            this.allModel[type].stylefalg = e.target.checked
        },
        selectLayoutType(type) {
            this.activeLayout = type
            if (this.layoutType == type) {
                return
            }
            if (this.layoutType) {
                this.modalVisible = true
                //弹窗确定按钮 准备中;
            } else {
                //选择布局类型；
                this.layoutType = type
                let lay = this.selectLayout[type]
                this.allModel.layoutModel = this.mergeObj(lay)
                //设置布局名字；
                this.layTitle = this.layoutTitle[type]
                this.layKey = Math.random().toString(36).slice(2)
            }
        },
        initAllModel() {
            var obj = JSON.parse(JSON.stringify(this.allModel))
            for (let key in obj) {
                if (key != 'layoutModel') {
                    obj[key] = {
                        selectModel: {
                            name: '',
                            config: {},
                        },
                        toolStyle: '',
                        showTab: 'no',
                        tabData: [],
                    }
                }
            }
            return obj
        },
        mergeObj(oldObj) {
            let _obj = {
                header: false,
                inheader: false,
                left: false,
                right: false,
                footer: false,
                infooter: false,
                center: false,
            }
            let obj = Object.assign(_obj, oldObj)

            return obj
        },
        onSelectLayout(e) {
            let val = e.target.value
            this.placement = val
            if (val == 'drag') {

                this.drawerTitle = this.i18n('drag','拖拽布局');
                this.json = [];
                this.support = '';
            }
            if (val == 'custom') {

                this.drawerTitle = this.i18n('list.customLay','自定义布局')
            }
        },
        onClose(e) {
            this.support = '';
            this.supportConf = '';
            // 清空选择
            this.draglist = '';
            this.selectId = "";
        },
        get(id) {
            if(this.portalLayout){
                return insPortalDefApi.get(id);
            }else {
                return FormCustomApi.get(id);
            }
        },
        setName(values){
            let name = values.name;
            this.mdl["name"]=this.$i18(values.name)
            try {
                this.mdl['i18nJsonName'] = JSON.parse(name)
            }catch (e) {}
        },
        onload_(values) {
            if (values) {
                //门户定义
                if(this.portalLayout){
                    this.setName(values)
                    this.$set(this.mdl,"alias",values.key)
                    if(values.layoutJson){
                        this.json =this.convertData(JSON.parse(values.layoutJson));
                    }
                }else {
                    this.mdl = values;
                    this.setName(values)
                    this.onSelectLayout({target: {value: values.type}})
                    if (values.type === 'drag') {
                        this.json = JSON.parse(values.json)
                    }else if (values.type === 'custom') {
                        this.allModel = JSON.parse(values.json)
                        this.json = [];
                        this.selectLayoutType(this.allModel.layoutType)
                    }
                }
            }
        },
        save(values,vm) {
            debugger
            if(!Util.hasChineseAndSpecialChars(values.alias)){
                this.$message.warning('标识中不能包含中文以及特殊字符~');
                vm.loading = false;
                return;
            }
            if(this.portalLayout){
                var parameter={
                    portId:this.pkId,
                    layoutList:this.json,
                    name: JSON.stringify(this.mdl.i18nJsonName),
                    alias:this.mdl.alias
                }
                return insPortalDefApi.saveAll(parameter);
            }else {
                values.type = this.placement
                if (values.type == 'drag') {
                    values.json = JSON.stringify(this.json)
                } else if (values.type == 'custom') {
                    this.allModel.layoutType = this.layoutType
                    values.json = JSON.stringify(this.allModel)
                }
                values.name = JSON.stringify(this.mdl.i18nJsonName)
                return FormCustomApi.save(values)
            }
        },
        getMaxHeight() {
            var layout = this.json
            if (!layout || layout.length == 0) {
                return 0
            }
            let maxHeight = 0
            var idx = 0
            for (var i = 0; i < layout.length; i++) {
                var compoment = layout[i]
                if (maxHeight < compoment.y) {
                    maxHeight = compoment.y
                    idx = i
                }
            }
            let max = layout[idx].y + layout[idx].h
            return max
        },
        changeType(e) {
            this.mdl.typeChecked = e.target.checked
        },
        handleMenuClick(key, type) {
            if (type != 'drag') {
                var conslt = {}
                this.$set(this.allModel[type].selectModel, 'config', conslt)
                this.$set(this.allModel[type].selectModel, 'name', key)
            }
        },
         handAddComponent(type) {
             if(type=='chartBoard'){
                 //添加弹窗
                 this.addChartBoard(type)
             }else{
                 this.handComponent(type)
             }

        },
        handComponent(type,data){
            debugger
            var key = type;
            var maxHeight = this.getMaxHeight()
            var json = this.json
            var time = new Date().getTime()
            var height = maxHeight + 16
            var newLayout = {
                x: 18,
                y: height,
                w: 6,
                h: 16,
                i: time,
                id: Util.randomId(),
                config:key=='chartBoard'?data: key=='myChartBoard'?{}:"",
                defConf: key,
                active: false,
                main: false,
                mobileH:300,
                mobileShow:true,
            }
            if(type=='tabContainer'){
                newLayout.config = {
                    tabType:"line",
                    tabPosition:"top",
                    alias:Util.randomId(),
                    tabs:[{id: Util.randomId(), name:"Tab1", icon:"", defConf: "", config: ""}, {id: Util.randomId(), name:"Tab2", icon:"", defConf: "", config: ""}]
                }
            }
            json.push(newLayout)
            // 清空选择
            this.draglist = '';
        },
         addChartBoard(type){
            let self = this;
            Util.open({
                component: FormChartBoard,
                curVm: this,
                title: this.i18n('chartBoard','图表看板'),
                max:false,
                widthHeight: ['400px', '600px'],
                data: {

                }
            }, function (action, data) {
                if(action!='ok') return;
                self.handComponent(type,data)
            });
        },
        editObj(item,showDrawer) {
            this.moduleid =item.id;
            if(showDrawer || this.placement!='drag'){
                //富文本组件
                if(item.defConf=="quillEditor"){
                    debugger
                    Util.open({
                        component: QuillEditorView,
                        curVm: this,
                        title: this.i18n('list.richEditor','富文本编辑器'),
                        max:true,
                        zIndex:999,
                        data: {
                            readOnly:false,
                            config:item.config
                        }
                    }, function (action, data) {
                        if(action!='ok') return;
                        if(!item.config){
                            item.config={html:''}
                        }
                        item.config.html=data;
                    });

                }else {
                    this.supportConf = item.config;
                    this.support = "";
                    this.editLayout=true;
                    this.$nextTick(() => {
                        this.support = item.defConf;
                    })
                }
            }
            this.draglist = '';
            this.selectId = item.id;
        },
        removeObj(key) {
            var json = this.json
            for (var i = 0; i < json.length; i++) {
                if (key == json[i].i) {
                    //判断是否是选择的
                    if (this.selectId == json[i].id) {
                        this.selectId = "";
                        this.supportConf = "";
                        this.support = "";
                    }
                    json.splice(i, 1);
                    break
                }
            }
        },
        activeItem(item) {
            var layout = this.json
            for (var i = 0; i < layout.length; i++) {
                var obj = layout[i]
                obj.active = false
            }
            item.active = true
        },
        setMain() {
            var layout = this.json
            for (var i = 0; i < layout.length; i++) {
                var obj = layout[i]
                if (obj.active) {
                    obj.active = false
                    obj.main = true
                } else {
                    obj.main = false
                }
            }
        },
        preview() {
            if(!Util.hasChineseAndSpecialChars(this.mdl.alias)){
                this.$message.warning('标识中不能包含中文以及特殊字符~');
                return;
            }
            if(this.portalLayout){
                var self_=this;
                var parameter={
                    portId:this.pkId,
                    name:this.mdl.name,
                    alias:this.mdl.alias,
                    layoutList:this.json
                }
                insPortalDefApi.saveAll(parameter).then (res => {
                    if(!res.success){
                        self_.$message.error(res.message);
                        return;
                    }
                    let currentApp = this.$parent.currentApp;
                    let appKey= currentApp?currentApp.clientCode:"0";
                    if(!appKey){
                        return;
                    }
                    let ctxPath= process.env.VUE_APP_CONTEXT_MAIN;
                    let url= ctxPath+"/PortalLayoutPreview/"+this.mdl.key;
                    let appId=this.curApp.appId;
                    if(appId){
                        url+="?appId="+ appId;
                    }
                    this.previewView(url);
                });
            }else {
                this.mdl.type = this.placement
                if (this.mdl.type == 'drag') {
                    this.mdl.json = JSON.stringify(this.json)
                }else if (this.mdl.type == 'custom') {
                    this.allModel.layoutType = this.layoutType
                    this.mdl.json = JSON.stringify(this.allModel)
                }
                var self=this;
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        self.loading = false;
                        return;
                    }else {
                        self.loading = true;
                        let appId=this.curApp.appId;
                        if(appId){
                            self.mdl.appId=appId;
                        }
                        FormCustomApi.save(self.mdl).then(res => {
                            self.loading = false;
                            if(res.success){
                                if (res.data && res.data.alias) {
                                    self.$set(self.mdl,"id",res.data.id);
                                    let currentApp = this.$parent.currentApp;
                                    let appKey= currentApp?currentApp.clientCode:"0";
                                    if(!appKey){
                                        return;
                                    }
                                    let ctxPath= process.env.VUE_APP_CONTEXT_MAIN;
                                    let url=ctxPath+"/FormCustomView/"+res.data.alias;
                                    let appId=this.curApp.appId;
                                    if(appId){
                                        url+="?appId="+ appId;
                                    }
                                    this.previewView(url);
                                }
                            }
                        })
                    }
                });
            }
        },
        onOk() {
            var _self = this
            if (!this.layoutType && this.placement == 'custom') {
                if (_self.isShow) {
                    _self.isShow = false
                    this.$notification.warning({
                        message: _self.$ti18('rxMsa.tips','提示'),
                        description: _self.i18n('selectLay','请选择布局！'),
                        duration: 2,
                        onClose: () => {
                            _self.isShow = true
                        },
                    })
                }
                return
            }
        },
        handleOk() {
            let type = this.activeLayout
            this.allModel = this.initAllModel()
            this.layoutType = type
            let lay = this.selectLayout[type]
            this.allModel.layoutModel = this.mergeObj(lay)
            //设置布局名字；
            this.layTitle = this.layoutTitle[type]
            this.layKey = Math.random().toString(36).slice(2)
            this.modalVisible = false
        },
        handleCancel() {
            this.modalVisible = false
        },
        // 获取门户栏目
        getInsColumns(){
            FormCustomApi.getInsColumns().then(res=>{
                if(res && res.success){
                    this.insColumns=res.data;
                }
            });
        },
        //添加门户栏目
        addInsColumn(){
            var self=this;
            insPortalDialogApi.openInsCloumnDefDialog({
                curVm: this,data:{single:false}, widthHeight: ['800px','600px']
            },function(self_,columns){
                for(let i=0;i<columns.length;i++){
                    var column=columns[i];
                    var maxHeight = self.getMaxHeight();
                    var time = new Date().getTime();
                    var height = maxHeight + 16;
                    var newLayout = {
                        x: 18,
                        y: height,
                        w: 6,
                        h: 16,
                        i: time,
                        id: Util.randomId(),
                        config: {colId:column.colId,name:column.name},
                        defConf: "column",
                        active: false,
                        main: false
                    }
                    self.json.push(newLayout);
                }
            });
        },
        addCustomColumn(){
            var self=this;
            Util.open({
                component: CustomPageColumnDialog,
                curVm: this,
                title: self.i18n('list.customCol','自定义页面栏目'),
                widthHeight: ['750px', '500px'],
            }, function (action, data) {
                if(action!='ok') return;
                var maxHeight = self.getMaxHeight();
                var time = new Date().getTime();
                var height = maxHeight + 16;
                var newLayout = {
                    x: 18,
                    y: height,
                    w: 6,
                    h: 16,
                    i: time,
                    id: Util.randomId(),
                    config: {alias:data.alias,name:data.name},
                    defConf: "customColumn",
                    active: false,
                    main: false
                }
                self.json.push(newLayout);
            });
        },
        closeDrawert(){
            this.editLayout=false;
        },
        /**
         * 旧数据转换
         * @param layouts
         */
        convertData(layouts){
            var newLayouts=[];
            for (let i = 0; i < layouts.length; i++) {
                if(!layouts[i].config && !layouts[i].defConf){
                    layouts[i]["config"]={
                        colId:layouts[i].colId,
                        name:layouts[i].layoutName
                    };
                    layouts[i].defConf="column";
                    layouts[i].id=Util.randomId();
                }
                newLayouts.push(layouts[i]);
            }
            return newLayouts;
        },
        paramConfig(){
            this.paramDrawer=true;
        },
        closeParam(){
            let parameters=this.mdl.params || "[]";
            var params=JSON.parse(parameters);
            var param=params.find(item=>{
                if(!item.value || !item.label){
                    return true;
                }
                return false;
            })
            if(param){
                var description=this.i18n('paraEmpty',"参数名称不能为空!");
                if(!param.value){
                    description=this.i18n('paraEmpty',"参数标识不能为空!");
                }
                this.$notification.warning({ message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: description ,duration: 2});
            }else {
                this.paramDrawer=false;
            }
        },
        setParams(params){
            this.mdl.params=JSON.stringify(params);
        },
        getChart(item){
            Util.open({
                component: FormChartComponentDialog,
                curVm: this,
                title: this.i18n('importChart','引入已有图表'),
                widthHeight: ['750px', '500px'],
            }, function (action, data) {
                if(action!='ok' || !data.config){
                    return;
                }
                item.config=JSON.parse(data.config);
                item.config.name=data.name;
            });
        },
        //导出
        exportFormCustom(){
            if(!this.mdl.json || !this.placement){
                this.$message.warn(this.i18n('notExport',"未配置任何组件无法导出!"));
                return;
            }
            var content = JSON.stringify({
                json:this.placement=='drag'?this.json : this.allModel,
                placement:this.placement,
                layoutKey:this.layoutKey
            });
            var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
            FileSaver.saveAs(blob, "form_custom_" + this.mdl.name + ".json");
        },
        //导入
        handleOpenFile(){
            var self_ = this;
            var files = this.$refs.inputFile;
            var imputfiles = files.files[0];
            const reader = new FileReader();
            reader.readAsText(imputfiles, "UTF-8");
            reader.onload = function (e) {
                // 读取文件内容
                const fileString = e.target.result;

                const data = JSON.parse(fileString);

                self_.$set(self_,"placement",data.placement);
                if(data.placement=='drag'){
                    self_.$set(self_,"json",data.json);
                }else {
                    self_.$set(self_,"allModel",data.json);
                    self_.$set(self_,"layoutKey",data.layoutKey);
                }
            }
        },
        //复制标识
        copyAlias(item){
          this.copyText("let component = this.getCustomViewComponent(\""+item.id+"\",\""+item.config.alias+"\");");
          this.$message.info(this.i18n2('tip.copySuccess',"复制了组件标识，你可以粘贴进行使用!"));
        },
        //复制函数
        copyFunction(item){
            //自定义栏目单独处理
            if(item.defConf=="customColumn"){
                let event=`var config = {
                //组件id
                component: "${item.id}",
                //传入参数
                method: "",
                data:""
            };
            //触发页面定制公共事件函数
            this.$bus.emit('formCustomPublicEvent', config);`
                this.copyText(event);
                this.$message.info(this.i18n2('tip.successful',"生成发布事件成功,代码在剪切板中，你可以粘贴进行使用!"));
                return ;
            }

            if(!item.config || !item.config.receive){
                this.$message.warning(this.i18n2('tip.component',"该组件未配置传入参数，请去配置!"));
                return;
            }
            let params={};
            //构造参数
            let mapping=[];
            //表单主键时需要取主键配置
            if(item.defConf=="form" &&item.config.receive.isPk=="YES"){
                mapping= item.config.receive.pkMapping;
            }else {
                mapping= item.config.receive.mapping;
            }
            let ary=mapping.filter(item=>{
                return item.valueSource == 'param';
            });
            for(let item of ary){
                params[item.name]="";
            }
            let paramsStr=JSON.stringify(params);
            let event=`var config = {
                //组件id
                component: "${item.id}",
                //传入参数
                params: ${paramsStr}
            };
            //触发页面定制公共事件函数
            this.$bus.emit('formCustomPublicEvent', config);`
            this.copyText(event);
            this.$message.info(this.i18n2('tip.successful',"生成发布事件成功,代码在剪切板中，你可以粘贴进行使用!"));
        },
        copyText(text){
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text);
            }else {
                let textArea=document.querySelector("#temp_textarea");
                if(!textArea){
                    textArea = document.createElement('textarea');
                    textArea.setAttribute("id","temp_textarea");
                    // 使text area不在viewport，同时设置不可见
                    document.body.appendChild(textArea)
                }
                textArea.value = text;
                textArea.focus()
                textArea.select()
                // 执行复制命令并移除文本框
                document.execCommand('copy');
                textArea.remove();
            }
        },

        /**
         * 预览页面定制
         */
        previewView(url){
            let conf = {
                component: DialogView,
                curVm: this,
                max: true,
                title:this.mdl.name?this.mdl.name:"自定义页面预览",
                data: {
                    url:url
                }
            };
            Util.open(conf);
        },
        nameChange(e){
            let {value} = e.target ;
            let lan = Util.getLanguage()
            if(this.mdl.i18nJsonName){
                this.mdl.i18nJsonName[lan] = value ;
            }else {
                this.mdl.i18nJsonName = {
                    [lan]:value
                }
            }
        },
        editI18nName(record, text) {
            let lan = Util.getLanguage()
            let conifg = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    i18nJson: record.i18nJsonName
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                record[text] = data[lan];
                record.i18nJsonName = {...data};
                debugger
            });
        },
        jsonChad(item){
            this.json = item
        }
    },
    watch: {
        allModel: {
            handler: function (val, odl) {
                this.layoutKey = Math.random().toString(36).substr(2)
            },
            deep: true,
        },
    },
}
</script>
<style scoped>
.custom-design-box{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.custom-design-center{
    position: relative;
}
.rx-roll{
    position: absolute;
    inset: 0;
    overflow: auto;
}
.custom-design-header{
    padding:4px 10px;
    display:flex ;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}


.mobile-compile{
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
}
.mobile-compile:hover{
    color: rgb(33, 150, 243);
}
.mobile-form-center-list{
    display: flex;
    height: calc(100% - 52px)
}
.form-center-head{
    z-index: 99;
    position:initial;
    text-align: center;
    background-color: white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, .24) 0px 2px 4px;
}
.form-center-head i{
    font-size: 30px;
    cursor: pointer;
    margin-right: 50px;
}
.form-center-head i:hover{
    color: rgb(33, 150, 243);
}
.form-center-hea-color{
    color: rgb(33, 150, 243);
}
.form-center{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.form-center-list{
    flex: 1;
    overflow: auto;
}
.rxDialogsbox >>>.ant-layout-footer{
    z-index: 99!important;
}
.conceal{
    position: absolute;
    top: 39px;
    right: 10px;
    width: calc(100% - 14px);
    height: calc(100% - 55px);

    z-index: 99;
}
.rxDialogsbox >>> .buttongmodle {
    position: relative;
}
.borderTips{
    border:1px solid #1890ff;
}
.select {
    border: solid 1px #5b8fff !important;
}

.draglist {
    width: 100%;
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: 1fr 1fr;
}


.dragiconfont {
    position: absolute;
    right: 15px;
    top: 0px;
    height: 17px;
    width: 17px;
    border: 10px solid;
    border-color: #5b8fff #5b8fff transparent transparent;
}

.dragiconfont i {
    float: left;
    margin-top: -12px;
    margin-left: -1px;
    font-size: 12px;
    color: white;
}

.draglist_img {
    display: inline-flex;
    width: 72px;
    height: 72px;
    border-radius: 2px;
    border: dashed 1px #dadde0;
}

.draglist_img > img {
    width: 58px;
    height: 58px;
    margin-left: 6px;
    margin-top: 6px;
}

.draglist > div > span {
    display: block;
    text-align: center;
    color: #555555;
    font-size: 12px;
    margin-top: 4px;
}

.layout {
    color: #555555;
    line-height: 30px;
    padding-left: 10px;
}

.buttonlist {
    width: 100%;
    margin-top: 25px;
}

.biaolist {
    margin-bottom: 5px;
}

.tablist {
    margin-bottom: 10px;
}

.alist {
    border: none !important;
    margin-top: 10px;
}

.ithear {
    overflow: hidden;
}

.ithear span:nth-child(1) {
    width: 6px;
    height: 6px;
    background-color: #2f54eb;
    display: block;
    float: left;
    margin-top: 7px;
}

.ithear span:nth-child(2) {
    display: block;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: #46494d;
    float: left;
    margin: 0px 10px;
}

.ithear_icon {
    color: #c0c5cc;
    float: left;
    margin-top: 4px;
    cursor: pointer;
}

.ithear > div {
    float: left;
    width: calc(100% - 100px);
    border-top: 1px solid #c0c5cc;
    margin-left: 10px;
    margin-top: 10px;
}

.formCustomized .rx-center > div.rx-box {
    top: 0;
    left: 0;
    bottom: 0;
    padding-right: 0;
    background: #f0f2f5;
}
body  .ant-modal-wrap,
.ant-notification {
    z-index: 99999;
}

.drawerCentainer .ant-form-vertical .ant-form-item {
    flex-direction: column;
    margin-bottom: 0;
}

.ant-btn-primary {
    margin-right: 6px;
}

.btnSpan {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background:rgba(255,88,90,0.85);
    display: inline-block;
    margin-right: 0;
    cursor: pointer;
    z-index: 99;
}
.btnSpan i {
    color: #fff;
    font-size: 16px;
    margin-top: 7px;
    text-align: center;
}
.btnSpan:hover{
    background: #f6393a;
}
.editBtnSpan {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background:#5885ff;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    z-index: 99;
}
.editBtnSpan i {
    color: #fff;
    font-size: 16px;
    margin-top: 7px;
    text-align: center;
}
.editBtnSpan:hover{
    background: #5885ff;
    transform: translate(0,-3px);
    transition: transform .5s;
}

.gridLayout-select{
    border: 1px solid #1890ff!important;
}

.gridLayoutClass {
    background: #fff!important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /*border: 1px solid #dadde0;*/
}

.headPClass {
    box-sizing: border-box;
    z-index: 99;
    position: absolute;
    right: 0;
    top:0;
}
.active {
    /*background-color:#ec971f;*/
    cursor: default;
}

.main {
    background-color: #ec971f;
    cursor: default;
}

.toolTabs {
    height: 100%;
}

ul,
li {
    list-style: none;
}

.itmelist p {
    flex: 1;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.itmelist p:hover {
    color: #0000cc;
    cursor: pointer;
}
.itmelist {
    padding-left: 20px;
    position: relative;
    line-height: 30px;
}

.itmelist:before {
    content: '■';
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -2px;
    font-size: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
    color: #ccc;
}

.itmelist b {
    font-style: normal;
    display: inline-block;
    padding: 4px 8px;
}

/*yx*/
/* 抽屉样式 */
.drawerCentainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.drawerCentainer .drawerBox {
    flex: 1;
    position: relative;
}

.drawerCentainer .drawerBox .box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    overflow: auto;
    padding: 10px;
}

.drawerCentainer .drawerToobar {
    padding: 10px;
    border-top: 1px solid #ddd;
    text-align: right;
    box-shadow: 0px 0px 20px -7px #939292;
}

.drawerCenter {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    bottom: 0;
    padding: 0 10px;
}

.dragControl {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 4px;
}

.dragControl:hover {
    background: #1890ff;
    color: #fff;
}

.customUl {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    text-align: center;

}

.customControl {
    background: #fff;
}

.customControl:nth-child(5n) {
    margin-right: 0;
}

.customControl > p {
    margin-top: 4px;
    font-size: 13px;
}

.customControl > .layoutImg {
    display: inline-block;
    border: 1px dashed #dadde0;
    padding: 5px;
    background: #fff;
    font-size: 0;
    border-radius: 4px;
    cursor: pointer;
}

.layoutImgBox {
    display: inline-block;
    width: 68px;
    height: 68px;
    background: url('../../../../../static/img/layout.png') no-repeat;
    background-color: #ddd;
    background-size: 270px 180px;
}

.customControl.active .layoutImg,
.layoutImg:hover {
    border-color: #1890ff;
}

.customControl.active .layoutImgBox,
.layoutImg:hover .layoutImgBox {
    background-color: #1890ff;
}

/*上小下大*/
.layoutImgBox.upDown {
    background-position: -8px -8px;
}

/*上大下小*/
.layoutImgBox.upDown2 {
    background-position: -98px -8px;
}

/*左中右*/
.layoutImgBox.leftMiddleRight {
    background-position: -8px -98px;
}

/*左右*/
.layoutImgBox.leftRight {
    background-position: -98px -98px;
}

/*左上下*/
.layoutImgBox.leftUpDown {
    background-position: -188px -8px;
}

.editModl > h6 {
    font-size: 14px;
    margin-top: 22px;
    font-weight: bold;
}
/*    自定义栏目*/
.columnbox{
    margin: 0 10px 10px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 3px;
    border: solid 1px #b6c4ff;
    line-height: 28px;
    color: #849cff;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0 6px;
    font-size: 12px;
}
.columnbox > span{
    display: inline-block;
    width: 30px;
    height: 28px;
    background: #b6c4ff;
    color: #fff;
    text-align: center;
    margin-right: 5px;
}
.columnbox >p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-tit,
.tips-tit{
    display: inline-block;
    font-size: 12px;
    background: #f5f7fa;
    color: #a8aeb5;
    padding: 4px 6px;
    border-radius: 0 0 0 12px;
}

.lay-title{
    background: #f5f7fa;
    border-bottom: 1px solid #dfdfdf;
    padding: 3px 10px;
    position: fixed;
    width: 100%;
    z-index: 99;
}
.lay-con{
    padding: 10px;
    position: absolute;
    width: 100%;
    top: 28px;
}
.gridLayoutporview >>> .portal-calendar .headPClass,
.gridLayoutporview >>> .headerTitle{
    display: none!important;
}

/*    经典布局*/
.grey-border{
    border: 1px solid #dadde0;
}
.FormCustomEditControl{
    height: 100%;
    width: 100%;
    position: relative;
    background: white;
}
.FormCustomEditControl-prohibit{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 20px;
    bottom: 20px;
    z-index: 9;
}
.gridLayout-select>>>.tab-common-defConf{
    border: 1px solid #1890ff;
    border-radius: 5px;
}
.gridLayout-select>>>.tab-common-button{
    display: block;
}
.rxDialogsbox>>>.defaultContent{
 z-index: 98!important;
}
.editImg {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

.editImg img {
    height: 100%;
    max-height: 100px;
}
.rx-text-layout{
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
    text-align: center;
}
</style>
